<template>
  <div id="infor">
    <nav-header></nav-header>
    <div class="infor-content">
      <!-- 法人身份证 -->
      <sidebar
        :tags="tags"
        @conIndex="getIndex($event)"
        ref="father"
        :defaultIndex="defaultIndex"
      ></sidebar>
      <div class="infor-right" v-show="ctnIndex == 0">
        <div class="account">身份认证</div>
        <div class="infor">
          <div class="id-title">法人身份证</div>
          <div class="id-prompt">请填写身份证信息，完成身份验证</div>
          <div class="fill-infor">
            <div class="id-name">姓名:</div>
            <input
              type="text"
              name=""
              id=""
              placeholder="请输入真实姓名"
              class="ipt-name"
              v-model="idName"
            />
            <div class="icon">*</div>
          </div>
          <div class="fill-infor">
            <div class="id-name">身份证号码:</div>
            <input
              type="text"
              name=""
              id=""
              placeholder="请输入身份证号码"
              class="ipt-code"
              v-model="idCard"
            />
            <div class="icon">*</div>
          </div>
          <div class="submit" @click="submitId" v-if="state.personState === 0">
            提交
          </div>
          <div class="submit defaultBuuton" v-else>已提交</div>
        </div>
      </div>
      <!-- 申请书 -->
      <div class="infor-right" v-show="ctnIndex == 1">
        <div class="account">申请书</div>
        <div class="infor">
          <div class="id-title">申请书</div>
          <div class="id-prompt">请上传申请书（需盖公章），完成验证</div>
          <div class="fill-infor">
            <div class="id-name">企业认证申请公函：</div>
            <div class="icon">*</div>
          </div>
          <div class="photo-content">
            <input
              class="book"
              type="file"
              name=""
              id=""
              accept="image/*"
              @change="addImg($event, 'serverUrl')"
            />
            <img :src="serverUrl" alt="" />
          </div>
          <div
            class="submit request-book"
            @click="submit"
            v-if="state.requestState === 0"
          >
            提交
          </div>
          <div class="submit  request-book defaultBuuton" v-else>已提交</div>
        </div>
      </div>
      <!-- 营业执照 -->
      <div class="infor-right" v-show="ctnIndex == 2">
        <div class="account">营业执照</div>
        <div class="infor">
          <div class="id-title">营业执照</div>
          <div class="id-prompt">请上传营业执照，完成营业执照验证</div>
          <div class="fill-infor">
            <div class="id-name">企业工商营业执照：</div>
            <div class="icon">*</div>
          </div>
          <div class="photo-content license">
            <input
              class="book"
              type="file"
              name=""
              id=""
              accept="image/*"
              @change="addImg($event, 'companyUrl')"
            />
            <img :src="companyUrl" alt="" />
          </div>
          <div class="fill-infor">
            <div class="id-name">企业名称：</div>
            <input
              type="text"
              name=""
              id=""
              class="ipt-name"
              placeholder="请输入企业名称"
              v-model="companyName"
            />
            <div class="icon">*</div>
          </div>
          <div class="fill-infor">
            <div class="id-name">注册号</div>
            <input
              type="number"
              name=""
              id=""
              class="ipt-name"
              placeholder="请输入营业执照注册号"
              v-model="number"
            />
            <div class="icon">*</div>
          </div>
          <div
            class="submit request-book"
            @click="submitCompany"
            v-if="state.businessState === 0"
          >
            提交
          </div>
          <div class="submit request-book  defaultBuuton" v-else>已提交</div>
        </div>
      </div>
    </div>
    <nav-footer ref="child"> </nav-footer>
  </div>
</template>

<script>
import Sidebar from "../components/Sidebar";
import NavHeader from "../components/Header";
import NavFooter from "../components/Footer";
import bookPhoto from "../assets/imgs/photo.png";
export default {
  data() {
    return {
      tags: [
        // { name: "企业认证" },
        { name: "法人身份证" },
        { name: "申请书" },
        { name: "营业执照" },
      ],
      ctnIndex: 0,
      defaultIndex: 0,
      serverUrl: "",
      companyName: "",
      number: "",
      idCard: null,
      idName: null,
      infor: "",
      token: "",
      companyUrl: "",
      state: "",
    };
  },
  components: {
    Sidebar,
    NavHeader,
    NavFooter,
  },

  created() {
    this.$fetch(`/laiwen/business/frontend/getstate`).then((res) => {
      this.state = res.state;
      this.infor = res.state.business;
      this.idCard = res.state.business.personNumber;
      this.idName = res.state.business.personName;
      this.number = res.state.business.businessNumber;
      this.companyName = res.state.business.businessName;
      this.companyUrl = res.state.business.businessImage;
      this.serverUrl = res.state.business.requestImage;
      this.picDefault("companyUrl", "businessImage", res);
      this.picDefault("serverUrl", "requestImage", res);
    });

    //改变侧边栏显示
    if (this.$route.query.index != void 0) {
      this.defaultIndex = this.$route.query.index * 1;
      this.ctnIndex = this.$route.query.index * 1;
    } else {
    }
  },
  methods: {
    //图片判断
    picDefault(name, imgName, res) {
      if (this[name] == null) {
        this[name] = bookPhoto;
      } else {
        this[name] = res.state.business[imgName];
      }
    },
    //接受子组件index
    getIndex(e) {
      console.log(e);
      this.ctnIndex = e;
    },
    // 添加头像
    addImg(e, name) {
      console.log(e);
      let fileLen = e.target.files.length;
      console.log(fileLen);
      for (let i = 0; i < fileLen; i++) {
        let file = e.target.files[i];
        console.log(file);
        let reader = new FileReader();
        reader.readAsDataURL(file);
        let that = this;
        reader.onload = function(e) {
          that.url = e.target.result;
          //上传到服务器
          that.$post(`/laiwen/upload/file/baseimage`, that.url).then((res) => {
            that[name] = res.downUrl;
          });
        };
      }
    },
    //提交营业执照
    submitCompany() {
      let company = {};
      this.$set(company, "businessImage", this.companyUrl);
      this.$set(company, "businessNumber", this.number);
      this.$set(company, "businessName", this.companyName);
      if (company.businessImage == bookPhoto || company.businessNumber ==null || company.businessName == null) {
        this.$message.warning("请先补全信息");
        return false;
      }
      this.$post(`/laiwen/business/frontend/bImage`, company).then((res) => {
        console.log(res);
        if ((res.msg = "success")) {
          this.state.businessState = 1;
          this.$message.success("上传成功");
        }
      });
    },
    //提交申请书
    submit() {
      let requestImage = this.serverUrl;
      if (requestImage == bookPhoto) {
        this.$message.warning("请先上传申请书");
        return false;
      }
      this.$post(`/laiwen/business/frontend/rImage`, {
        requestImage: requestImage,
      }).then((res) => {
        console.log(res);
        if ((res.msg = "success")) {
          this.state.requestState = 1;
          this.$message.success("上传成功");
        }
      });
    },
    //身份验证
    submitId() {
      if (this.idCard == null || this.idName == null) {
        this.$message.error("亲亲请先上传信息");
      } else {
        let idInfor = {};
        this.$set(idInfor, "personNumber", this.idCard);
        this.$set(idInfor, "personName", this.idName);
        let idJson = JSON.stringify(idInfor);
        this.$post(`/laiwen/business/frontend/identify`, idJson).then((res) => {
          console.log(res);
          if (res.msg == "error" || res.msg == "信息不匹配") {
            this.$message.error("身份信息填写错误");
          } else {
            this.state.personState = 1;
            this.$message.success("提交成功");
          }
        });
      }
    },
  },
  mounted() {
    this.getRem(1920, 100);
  },
};
</script>

<style scoped src="../assets/css/idCheck.css"></style>
